<!DOCTYPE html>
<html>
<head>
<title>
</title>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,width=device-width" />
<meta content="true" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta name="HandheldFriendly" content="true" />
</head>
<body>
<!-- 代码 开始 -->
<style>
*{
	overflow-x: hidden;  
    overflow-y: hidden;
}
@font-face {
	font-family: "华文行楷";
	src: url("css/STXINGKA.TTF");
}
html{
	font-family: "华文行楷";
	font-size: 20px;
	overflow-x: hidden;  
    overflow-y: hidden;  
}
body{
	margin: 0;
	overflow-x: hidden;  
    overflow-y: hidden; 
}
#container {
	width: 100%;
	height: 100%;
	margin: 0;
}
#show_num {
	width: 100%;
	background: #fff;
	padding:2% 0 3% 1%;
}
#num{ padding: 0 0 0 1.2%;}
#start,#stop{margin:15% 4% 0 1%}
#pagetwo{
	/* background-image: url(images/bg3.jpg);
	background-position: bottom;
	background-size: cover;
	background-repeat: no-repeat; */
	background: linear-gradient(72deg,#2945a1,#c0518e,#cc7f1b,#c0518e,#2945a1);
	background-size: 400%;
	animation: liuguang 30s infinite;
}
@keyframes liuguang {
	100%{
		background-position:400% 0;
	}
}
#ptitle_wrap{
	margin-top: 2rem;
	font-weight: 700;
	font-family:"华文行楷";
	text-shadow: 2px 2px 15px rgba(97, 130, 219, .5);
	text-decoration: none;
	background: rgba(152, 0, 0,0);
	width:100%;
	color:#ffffff;
	text-align:center;
	font-size:60px;
	border:none;
	letter-spacing: .5rem;
}
#maintitle{
	display: block;
	font-size: 80px;
	line-height: 1.5em;
}
</style>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.2.css">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.2.js"></script>
<script type="text/javascript" src="js/jqcookie/jquery.cookie.js"></script>
<script>
	$(document).ready(function(e) {
		var roll_flag;	//setInterval标志
		var arr = Array();	//数组
		var begin_flag = true;	//初始化开始标志
		var rounds_id=0;//当轮id
		var records =Array();//全部中奖记录
		var Counts;//当轮抽取人数
		var rounds_name;//当轮奖项名
		var rounds_record = Array();//每轮记录
		var num;//滚动的数字
		var max_num; //当轮抽人数最大值
		var isRepeat = false; //当轮是否能重复
		var isSet;//是否准备好了
		var end_flag=false;//结束
		//获取配置
		var settings = JSON.parse($("#settings").val());
		$("#ptitle").html(settings.ptitle);
		//当轮初始化
		isSet = setRound(rounds_id,settings);
		$("#maintitle").html(settings.title);
		$("#subtitle").html(settings.ptitle);
		//配置初始化
		function setRound(rounds_id,settings){
			if(rounds_id<settings.rounds.length){
				$("#max").val(settings.max_num);
				document.title=settings.title;
				$("#Counts").val(settings.rounds[rounds_id].Counts);
				$("#isRepeat").val(settings.rounds[rounds_id].isRepeat);
				rounds_name = settings.rounds[rounds_id].rounds_name;
				// console.log(settings.rounds);
				return true;
			}else{
				console.log(records);
				$("#show").slideDown();
				$("#container").css("filter","blur(10px)");
				end_flag = true;
				return false;
			}
		}

		//监听当轮最大人数
		setTimeout(function(){
			max_num = $("#max").val();
			if(parseInt(max_num) > 1000){
				alert("请输入9-999的整数");
				begin_flag = false;
			}else{
				if(rounds_record.length<1){
					arr = [];
					for(var i=1;i<=max_num;i++){
						arr.push(i)//循环录入数组
					}
					begin_flag = true;
				}
			}
		},1000);
	
		//开始
		$("#start").click(function(){
			if (begin_flag&&!end_flag){
				$("#show").slideUp();
				$("#container").css("filter","none");
				
				roll_flag = setInterval(rd,60);
				begin_flag = false;
			}						
		});
		//结束
		$("#stop").click(function(){
			if(!end_flag){
				clearInterval(roll_flag);
				rounds_record.push(num);
				console.log("rounds_id:"+rounds_id);
				console.log(rounds_record);
				arr=no_repeat(arr,rounds_record);
				//判断本轮是否结束
				if(rounds_record.length>=parseInt($("#Counts").val())){
					// 写进记录板
					var rounds_result = "";
					for(var j=0;j<rounds_record.length;j++){
						rounds_result += rounds_record[j]+"</li><li>";
					}
					rounds_result = rounds_result.substring(0,rounds_result.length-4);
					$("#result").append("<tr><td class='round_name' width='30%'>"+rounds_name+"</td><td><ul><li>"+rounds_result+"</ul></td></tr>");

					console.log("$('#Counts'):"+$("#Counts").val());
					console.log("rounds_record.length:"+rounds_record.length);
					$("#show").slideDown();
					$("#container").css("filter","blur(10px)");
				
					records.push(rounds_record);
					rounds_record=[];
					rounds_id++;
					
					// 设置新一Round
					isSet = setRound(rounds_id,settings);
				}
				if(isSet){
					begin_flag = true;
				}
			}
		});

		//产生随机数
		function rd(){			
			num = arr[Math.floor(Math.random()*arr.length)];	//获得的随机数
			var hundred,figures,theunit;
			hundred = Math.floor(num/100);	
			figures = Math.floor(num%100/10);
			theunit = Math.floor(num%10);
			$("#num_1").html(hundred);
			$("#num_2").html(figures)
			$("#num_3").html(theunit)
		}	
			
		//不重复时排重函数	
		function no_repeat(arr,records){
			for(var i =0; i<arr.length;i++){
				for(var j =0;j<records.length;j++){
					if (arr[i] == records[j]){
						arr.splice(i,1);
						continue;	//跳过相同
					}
				}
			}
			return arr;
		}

		var flag2 = true;
		var flag3 = 1;
		//开始停止按键
		$(document).keydown(function(event){
			if(event.keyCode==32){
				if (flag2){
					$('#start').trigger('click');
					flag2 = false;
				}else{
					$('#stop').trigger('click');			
					flag2 = true;
				}
			}
			
			if(event.keyCode==90){
				if (flag3==1){
					window.location.href="#pagetwo";
					flag3=0;
				}else{
					window.location.href="#pageone";
					flag3=1;
				}
			}
		});  
  	});
</script>
<div id="container" style="margin: 0;">
  <!--第二屏begin-->
  <div data-role="page" id="pagetwo">
	<div style="opacity: 0;position: fixed;top:0;left:0">
		<input id="max" type="text" value="">
		<input type="hidden" id="settings" value="">
		<input id="Counts" type="text" value="">
		<input id="isRepeat" type="text" value="">
		<input id="records" type="text" value="">
	</div>
    <!--返回链接,属性别改--> 
    <a href="#pagetwo" data-transition="slide" data-direction="reverse" style="text-decoration: none;">
		<!-- <img src="images/title.png" width="40%" style="margin: 15px 30%;"/> -->
		<div id="ptitle_wrap">
			<span id="maintitle">

			</span>
			<span id="ptitle">
	
			</span>
		</div>
    </a>
    <div data-role="content" id="con__1" style="background-color: transparent;">
      <p> 
        <!--数字显示区域begin id别改-->
      <div id="show_num" style="background-color: transparent;">
        <div id="num" style="width:580px; margin:0 auto;z-index: 999999;"> 
        	<!-- <span id="num_1" style="width:33%; padding-top:60%; float:left; background:url(images/num5/0.png) no-repeat;background-size: contain;"></span> 
        	<span id="num_2" style=""></span>
			<span id="num_3" style="width:33%; padding-top:60%; background:url(images/num5/0.png) no-repeat;background-size: contain; float:left"></span>  -->
			<!-- 数字用css控制效果 -->
			<style>
				.num{
					width:auto;
					padding: 1rem;
					float:left;
					font-size: 240px;
					font-weight: 700;
					color: linen;
					line-height: 1em;
					font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
					-webkit-text-stroke: 3px #9ec5ff;
					text-shadow: 2px 2px 20px rgba(255, 255, 255, 0.5);
				}
			</style>
			<span class="num" id="num_1">0</span>
			<span class="num" id="num_2">0</span>
			<span class="num" id="num_3">0</span>
		</div>
        <div style="width:300px; margin: 30px auto 20px auto; height:200px;"> 
          <!--按钮begin id别改-->
          <button id="start" style="opacity:0;background-color:transparent;color:#FFB900;border:3px solid #FFB900;border-radius:50%;width:100px;padding:0;font-family: '微软雅黑';float:left; height:100px;font-weight: 700;font-size: 28px;margin-right:80px;">开始</button>
          <button id="stop" style="opacity:0;border-radius:50%;width:100px;color:#FFB900;border:3px solid #FFB900;padding:0;float:left; height:100px;font-family: '微软雅黑';font-weight: 700;font-size: 28px; background:transparent">停止</button>
          <!--按钮end id别改--> </div>
      </div>
    </div>
  </div>
  <!--第二屏end--> 
</div>

<!-- 显示所有抽过的记录 -->
<style>
	#show{
		width: 70%;
		max-width: 1000px;
		height: 80%;
		max-height: 500px;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		background-color: rgba(0,0,0,.6);
		border-radius:10px;
		display: none;
		position: fixed;
		z-index: 999999;
		border: 1px solid #fff;
		overflow-y: scroll;
		box-shadow: 0 0 15px 6px rgba(0, 0, 0, 0.1);
	}
	#show table{
		width: 90%;
		margin: auto;
	}
	#show table td{
		font-size: 40px;
		color: #fff;
		font-weight: 300;
		vertical-align: top;
		padding: .5rem;
		word-break: break-all;
		font-family: "华文行楷";
	}
	#show_title{
		font-size: 70px;
		font-family: "华文行楷";
		color: #fff;
		width: 90%;
		padding: 1rem 5%;
		text-align: center;
		margin: 0;
	}
	.round_name{
		font-size: 24px;
		font-weight: 500;
		color: rgba(255,255,255,0.4);
	}
	#result ul{
		margin: 0;
		padding: 0;
	}
	#result ul li{
		list-style: none;
		display: inline-block;
		padding:.5rem;
		font-family: "华文行楷";
	}
	/*滚动条样式*/
　　#show::-webkit-scrollbar{/*滚动条整体样式*/
		width:4px;/*高宽分别对应横竖滚动条的尺寸*/
		height:4px;
	}
	#show::-webkit-scrollbar-thumb{/*滚动条里面小方块*/
		border-radius:5px;
		-webkit-box-shadow:inset005pxrgba(0,0,0,0.2);
		background:rgba(0,0,0,0.2);}
	#show::-webkit-scrollbar-track{/*滚动条里面轨道*/
		-webkit-box-shadow:inset005pxrgba(0,0,0,0.2);
		border-radius:0;
		background:rgba(0,0,0,0.1);
	}
</style>
<div id="show">
	<p id="show_title">
		幸运名单
	</p>
	<table id="result"></table>
</div>
<script type="text/javascript">
function show_box(id) {
	 jQuery('.widget-box.visible').removeClass('visible');
	 jQuery('#'+id).addClass('visible');
}
</script>

<!-- 代码 结束 -->
<script>
function getJson(data){
	$("#settings").val(JSON.stringify(data));
}
</script>
<!-- 引入配置文件 -->
<script type="text/javascript" src="config.json?callback=getJson"></script>
	
</body>
</html>